// 导入守卫 处理
import router from '@/router'
import store from '@/store' // store====this.$store
// 前置守卫
const whitePage = ['/login', '/404'] // 不需要登陆的页面
router.beforeEach(async (to, from, next) => {
  // console.log('beforeEach')
  /*
   检测是否有token   store.state.user.token
       有token
            是否所有页面正常进入？
            如果是登陆页
                跳转到首页
            如果去的页面非登陆页
                  如果有用户信息
                      不调用接口正常通过
                  如果没有用户信息
                      调用接口获取用户信息，且在成功后执行正常通过

               验证token是否靠谱（调用接口），一般都是调用获取用户信息接口
                  如果获取到了，正常进入
                  如果没获取到，token有问题，有问题解决方式就是删除token返回到登陆页
               vuex定义state用于存储用户信息，同时定义对应的mutations与actions
               actions:调用api获取用户信息，在导入守卫进入页面前触发，正常获取了用户信息才可以通过进入页面
               1：定义api
               2:在vuex的user模块定义一个userInfo,定义修改它的mutations
               3:定义一个actions导入api调用api获取用户信息并存储
               4：在导航守卫中触发actions,actions如果成功获取了用户信息，才可以正常通过
      没token
          直接回登陆页适合吗？就在login页，我需要跳转吗  404,白名单（不需要登陆的页面）
          如果要去的页面无须登陆  ,要去的页面是否在白名单
               直接正常进入
          如果要去的页面需要登陆
               跳转到登陆页
*/
  if (store.state.user.token) {
    // console.log('to', to)
    // 只要是路由的path都要考虑大小写的情况
    if (to.path.toLowerCase() === '/login') {
      next('/')
    } else {
      if (store.state.user.userInfo.userId) {
        next()
      } else {
        await store.dispatch('user/getUserInfo')
        // 调用获取用户信息成功了
        next(to.fullPath)
        // next()
      }
    }
  } else {
    if (whitePage.includes(to.path.toLowerCase())) {
      next()
    } else {
      // token都没有，从来没登陆过，不用考虑
      next('/login?redirect=' + to.fullPath)
    }
  }
})

// 后置守卫

router.afterEach(() => {
  // console.log('afterEach')
})
